<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>实验室预约</title>
    <link href="../static/css/register.css" rel="stylesheet">

    <script src="../static/js/jquery.js"></script>
</head>

<body>
<div class="container">

    <div class="card o-hidden border-0 shadow-lg my-5">
        <div class="card-body p-0">
            <!-- Nested Row within Card Body -->
            <div class="row">
                <div class="col-lg-7">
                    <div class="p-5">
                        <div class="user">
                            <div align="center"><h2>预约</h2></div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                实验室Id:
                                <label for="labId"></label>
                                <input type="text" class="form-control form-control-user"
                                       id="labId">
                            </div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                实验室名称:
                                <label for="labname"></label>
                                <input type="text" class="form-control form-control-user" id="labname" name="labname">
                            </div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                用户ID:
                                <label for="userid"></label><input type="text" class="form-control form-control-user"
                                                                   id="userid">
                            </div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                用户姓名:
                                <label for="username"></label><input type="text" class="form-control form-control-user"
                                                                     id="username">
                            </div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                人数:
                                <label for="number"></label>
                                <input type="number" class="form-control form-control-user" id="number">
                            </div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                院系:
                                <label for="faculty"></label>
                                <select id="faculty">
                                    <option id="faculty1" selected>计算机科学与技术</option>
                                    <option id="faculty2">经济学院</option>
                                    <option id="faculty3">物理学院</option>
                                    <option id="faculty4">土木工程</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <span style="color: red;font-size: 12px;">*</span>
                                预约时间:
                                <label for="bookTime"></label>
                                <input type="date" id="bookTime">
                                <!--                                <select id="day">-->
                                <!--                                    <option id="Monday" value="0" selected>周一</option>-->
                                <!--                                    <option id="Tuesday" value="1">周二</option>-->
                                <!--                                    <option id="Wednesday" value="2">周三</option>-->
                                <!--                                    <option id="Thursday" value="3">周四</option>-->
                                <!--                                    <option id="Friday" value="4">周五</option>-->
                                <!--                                    <option id="Saturday" value="5">周六</option>-->
                                <!--                                    <option id="Sunday" value="6">周日</option>-->
                                <!--                                </select> &#45;&#45;-->
                                <!--<label for="endTime"></label><input type="datetime-local" id="endTime"-->
                                <!--onclick="endTime()">-->
                                <label for="course"></label>
                                <select id="course">
                                    <option id="course1" value="0" selected>08:00-09:40</option>
                                    <option id="course2" value="1">10:00-11:40</option>
                                    <option id="course3" value="2">14:00-15:40</option>
                                    <option id="course4" value="4">16:00-17:40</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-primary btn-user btn-block"
                                    onclick="book()">确认预约
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //判断登陆状态
    $(function () {
        $.ajax({
            type: "post",
            url: "http://localhost:8080/user/getCurrentUser",
            success: function (result) {
                if (result.code != '200') {
                    alert("请先登录账号！");
                    window.location.href = "login.html";
                }
            }
        });
    });

    //显示实验室相关信息
    $(function () {
        if (localStorage["labid"] != null && localStorage["labname"] != null) {
            document.getElementById("labId").value = localStorage["labid"];
            document.getElementById("labname").value = localStorage["labname"];
            localStorage.clear();
            //alert(document.getElementById("labId").value);
        }
    });

    //预约：开始时间
    $(function () {
        //得到当前时间
        let date_now = new Date();
        //得到当前年份
        let year = date_now.getFullYear();
        //得到当前月份
        //注：
        //  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
        //  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
        let month = date_now.getMonth() + 1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);
        //得到当前日子（多少号）
        let day = date_now.getDate() < 10 ? "0" + (date_now.getDate() + 1) : (date_now.getDate() + 1);
        //let hour = date_now.getHours() < 10 ? "0" + date_now.getHours() : date_now.getHours();
        //let minute = date_now.getMinutes() < 10 ? "0" + date_now.getMinutes() : date_now.getMinutes();
        //设置input标签的min属性
        //$("#beginTime").attr("min", year + "-" + month + "-" + day + "T" + hour + ":" + minute);
        $("#bookTime").attr("min", year + "-" + month + "-" + day);
    });


    //预约：结束时间
    // function endTime() {
    //     let beginTime = $("#beginTime").val();
    //     $("#endTime").attr("min", beginTime);
    // }

    //预约
    function book() {
        let labId = $("#labId").val();
        let labname = $("#labname").val();
        let userid = $("#userid").val();
        let username = $("#username").val();
        let number = $("#number").val();
        let faculty = $("#faculty option:selected").val();
        let day = dateType(new Date(Date.parse($("#bookTime").val())));
        //let endTime = dateType(new Date(Date.parse($("#endTime").val())));
        let courseTime = $("#course option:selected").text();
        let Time = day + " " + courseTime;
        let index = new Date(day).getDay();

        // if (endTime <= beginTime) {
        //     alert("结束时间不能早于开始时间！");
        // } else {
        let data = {
            "labid": labId,
            "labname": labname,
            "userid": userid,
            "username": username,
            "userNum": number,
            "faculty": faculty,
            "bookTime": Time,
            "time": courseTime,
            "index": index
        };
        $.post('http://localhost:8080/record/insertRecord', data, function (result) {
            //console.log(data)
            if (result.code == '200') {
                alert(result.msg);
                location.replace(location.href);
            } else {
                alert(result.msg);
            }
        });
        // }
    }

    //将时间戳转化为日期格式 yy-mm-dd hh:mm:ss
    function dateType(datetime) {
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : (datetime.getMonth() + 1);
        let day = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        //let hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
        //let minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
        return year + "-" + month + "-" + day;
    }
</script>
</body>
</html>